<template>
    <div ref="fdy_pic_id">
        <div class="bg">
            <div class="title">{{ teacherName }}老师 - 辅导员画像</div>

            <div class="leftMain">
                <div class="leftMain_top">
                    <div class="leftMain_topIn">
                        <ul>
                            <li>
                                <div class="liIn">
                                    <h3>我的学生人数</h3>
                                    <p class="shu"><span class="shu1">{{ hisForm.sum }}</span><i>人</i></p>
                                    <div class="zi">
                                        <span class="span1">男生:{{ hisForm.boy }}</span>
                                        <span>女生:{{ hisForm.girl }}</span>
                                    </div>
                                    <span class="border_bg_leftTop"></span>
                                    <span class="border_bg_rightTop"></span>
                                    <span class="border_bg_leftBottom"></span>
                                    <span class="border_bg_rightBottom"></span>
                                </div>
                            </li>
                            <li>
                                <div class="liIn">
                                    <h3>在校人数</h3>
                                    <p class="shu"><span class="shu2">{{ nowForm.sum }}</span><i>人</i></p>
                                    <div class="zi">
                                        <span class="span1">男生:{{ nowForm.boy }}</span>
                                        <span>女生:{{ nowForm.girl }}</span>
                                    </div>
                                    <span class="border_bg_leftTop"></span>
                                    <span class="border_bg_rightTop"></span>
                                    <span class="border_bg_leftBottom"></span>
                                    <span class="border_bg_rightBottom"></span>
                                </div>
                            </li>
                            <li>
                                <div class="liIn">
                                    <h3>入住人数</h3>
                                    <p class="shu"><span class="shu3">{{ liveForm.sum }}</span><i>人</i></p>
                                    <div class="zi">
                                        <span class="span1">男生:{{ liveForm.boy }}</span>
                                        <span>女生:{{ liveForm.girl }}</span>
                                    </div>
                                    <span class="border_bg_leftTop"></span>
                                    <span class="border_bg_rightTop"></span>
                                    <span class="border_bg_leftBottom"></span>
                                    <span class="border_bg_rightBottom"></span>
                                </div>
                            </li>
                            <li>
                                <div class="liIn">
                                    <h3>我的班级数</h3>
                                    <p class="shu"><span class="shu4">{{ classForm.all }}</span><i>个</i></p>
                                    <div class="zi">
                                        <span class="span1" :key="i" v-for="(v, i) in classForm.grade">
                                            {{ isEmpty(v.className) ? "未知年级" : v.className }}：{{ v.classCount }}
                                        </span>
                                    </div>
                                    <span class="border_bg_leftTop"></span>
                                    <span class="border_bg_rightTop"></span>
                                    <span class="border_bg_leftBottom"></span>
                                    <span class="border_bg_rightBottom"></span>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="leftMain_middle">
                    <div class="leftMain_middle_left">
                        <div class="leftMain_middle_leftIn">
                            <h3>这里是标题</h3>
                            <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
                            <div class="biaoge" style="width:100%; height:25vh" id="chartmain"></div>

                            <span class="border_bg_leftTop"></span>
                            <span class="border_bg_rightTop"></span>
                            <span class="border_bg_leftBottom"></span>
                            <span class="border_bg_rightBottom"></span>
                        </div>
                    </div>
                    <div class="leftMain_middle_right">
                        <div class="leftMain_middle_rightIn">
                            <h3>这里是标题</h3>
                            <div class="biaoge biaoge_pai" style="width:100%; height:25vh">
                                <div class="biaoge_paiIn">
                                    <ul>
                                        <li>
                                            <div class="liIn">
                                                <div class="liIn_left"><span class="bot"></span><span
                                                        class="zi">第一名</span>
                                                </div>
                                                <div class="liIn_line">
                                                    <div class="line_lineIn" style="width:98.5%;"></div>
                                                </div>
                                                <p class="num">98.5%</p>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="liIn liIn2">
                                                <div class="liIn_left"><span class="bot"></span><span
                                                        class="zi">第二名</span>
                                                </div>
                                                <div class="liIn_line">
                                                    <div class="line_lineIn" style="width:88.5%;"></div>
                                                </div>
                                                <p class="num">88.5%</p>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="liIn liIn3">
                                                <div class="liIn_left"><span class="bot"></span><span
                                                        class="zi">第三名</span>
                                                </div>
                                                <div class="liIn_line">
                                                    <div class="line_lineIn" style="width:68.5%;"></div>
                                                </div>
                                                <p class="num">68.5%</p>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="liIn liIn4">
                                                <div class="liIn_left"><span class="bot"></span><span
                                                        class="zi">第四名</span>
                                                </div>
                                                <div class="liIn_line">
                                                    <div class="line_lineIn" style="width:40.5%;"></div>
                                                </div>
                                                <p class="num">40.5%</p>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="liIn liIn5">
                                                <div class="liIn_left"><span class="bot"></span><span
                                                        class="zi">第五名</span>
                                                </div>
                                                <div class="liIn_line">
                                                    <div class="line_lineIn" style="width:22.5%;"></div>
                                                </div>
                                                <p class="num">22.5%</p>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="liIn liIn6">
                                                <div class="liIn_left"><span class="bot"></span><span
                                                        class="zi">第六名</span>
                                                </div>
                                                <div class="liIn_line">
                                                    <div class="line_lineIn" style="width:10.5%;"></div>
                                                </div>
                                                <p class="num">10.5%</p>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <span class="border_bg_leftTop"></span>
                            <span class="border_bg_rightTop"></span>
                            <span class="border_bg_leftBottom"></span>
                            <span class="border_bg_rightBottom"></span>
                        </div>
                    </div>
                </div>
                <div class="leftMain_middle">
                    <div class="leftMain_middle_left">
                        <div class="leftMain_middle_leftIn">
                            <h3>这里是标题</h3>
                            <div class="biaoge" style="width:100%; height:25vh" id="chartmain_zhe"></div>

                            <span class="border_bg_leftTop"></span>
                            <span class="border_bg_rightTop"></span>
                            <span class="border_bg_leftBottom"></span>
                            <span class="border_bg_rightBottom"></span>
                        </div>
                    </div>
                    <div class="leftMain_middle_right">
                        <div class="leftMain_middle_rightIn">
                            <h3>这里是标题</h3>
                            <div class="biaoge biaoge_bi" style="width:100%; height:25vh">
                                <ul>
                                    <li>
                                        <div class="liIn">
                                            <p class="shu shu1">23</p>
                                            <p class="zi">今日收益比例</p>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="liIn">
                                            <p class="shu shu2">107</p>
                                            <p class="zi">本月收益比例</p>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="liIn">
                                            <p class="shu shu3">107</p>
                                            <p class="zi">历史收益比例</p>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="liIn">
                                            <p class="shu shu4">23</p>
                                            <p class="zi">今日收益比例</p>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="liIn">
                                            <p class="shu shu5">23</p>
                                            <p class="zi">本月收益比例</p>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="liIn">
                                            <p class="shu shu6">23</p>
                                            <p class="zi">历史收益比例</p>
                                        </div>
                                    </li>
                                </ul>

                            </div>
                            <span class="border_bg_leftTop"></span>
                            <span class="border_bg_rightTop"></span>
                            <span class="border_bg_leftBottom"></span>
                            <span class="border_bg_rightBottom"></span>
                        </div>
                    </div>
                </div>
            </div>


            <div class="rightMain">
                <div class="rightMain_top">
                    <div class="rightMain_topIn">
                        <h3>这里是标题</h3>
                        <div class="biaoge" style="width:100%; height:30vh" id="chartmain_bing"></div>
                        <span class="border_bg_leftTop"></span>
                        <span class="border_bg_rightTop"></span>
                        <span class="border_bg_leftBottom"></span>
                        <span class="border_bg_rightBottom"></span>
                    </div>
                </div>
                <div class="rightMain_bottom">
                    <div class="rightMain_bottomIn">
                        <h3>这里是标题</h3>
                        <div class="biaoge biaoge_list" style="width:100%; height:36vh">
                            <div class="biaoge_listIn">
                                <ul class="ul_title">
                                    <li>用户</li>
                                    <li>类型号</li>
                                    <li>类别一</li>
                                    <li>类别二</li>
                                    <li>类别三</li>
                                </ul>
                                <div class="ul_list">
                                    <div class="ul_listIn">
                                        <ul class="ul_con">
                                            <li>张三</li>
                                            <li>11</li>
                                            <li>类别一</li>
                                            <li>类别二</li>
                                            <li>类别三</li>
                                        </ul>
                                        <ul class="ul_con">
                                            <li>张三</li>
                                            <li>12</li>
                                            <li>类别一</li>
                                            <li>类别二</li>
                                            <li>类别三</li>
                                        </ul>
                                        <ul class="ul_con">
                                            <li>张三</li>
                                            <li>13</li>
                                            <li>类别一</li>
                                            <li>类别二</li>
                                            <li>类别三</li>
                                        </ul>
                                        <ul class="ul_con">
                                            <li>张三</li>
                                            <li>14</li>
                                            <li>类别一</li>
                                            <li>类别二</li>
                                            <li>类别三</li>
                                        </ul>
                                        <ul class="ul_con">
                                            <li>张三</li>
                                            <li>15</li>
                                            <li>类别一</li>
                                            <li>类别二</li>
                                            <li>类别三</li>
                                        </ul>
                                        <ul class="ul_con">
                                            <li>张三</li>
                                            <li>16</li>
                                            <li>类别一</li>
                                            <li>类别二</li>
                                            <li>类别三</li>
                                        </ul>
                                        <ul class="ul_con">
                                            <li>张三</li>
                                            <li>11</li>
                                            <li>类别一</li>
                                            <li>类别二</li>
                                            <li>类别三</li>
                                        </ul>
                                        <ul class="ul_con">
                                            <li>张三</li>
                                            <li>12</li>
                                            <li>类别一</li>
                                            <li>类别二</li>
                                            <li>类别三</li>
                                        </ul>
                                        <ul class="ul_con">
                                            <li>张三</li>
                                            <li>13</li>
                                            <li>类别一</li>
                                            <li>类别二</li>
                                            <li>类别三</li>
                                        </ul>
                                        <ul class="ul_con">
                                            <li>张三</li>
                                            <li>14</li>
                                            <li>类别一</li>
                                            <li>类别二</li>
                                            <li>类别三</li>
                                        </ul>
                                        <ul class="ul_con">
                                            <li>张三</li>
                                            <li>15</li>
                                            <li>类别一</li>
                                            <li>类别二</li>
                                            <li>类别三</li>
                                        </ul>
                                        <ul class="ul_con">
                                            <li>张三</li>
                                            <li>16</li>
                                            <li>类别一</li>
                                            <li>类别二</li>
                                            <li>类别三</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <span class="border_bg_leftTop"></span>
                        <span class="border_bg_rightTop"></span>
                        <span class="border_bg_leftBottom"></span>
                        <span class="border_bg_rightBottom"></span>
                    </div>
                </div>
            </div>
            <div style="clear:both;"></div>
        </div>
    </div>
</template>

<script>

import { countOwnHisStu, countOwnNowStu, countOwnLiveStu, countOwnHisClass } from "@/api/stuCQS/basedata/teacher";

import { fullLoading, isEmpty } from "@/api/helpFunc";

export default {
    name: "fdy_pic",
    data() {
        return {
            isEmpty,
            teacherName: "江锡凤",

            hisForm: {
                sum: 0,
                boy: 0,
                girl: 0
            },
            nowForm: {
                sum: 0,
                boy: 0,
                girl: 0
            },

            liveForm: {
                sum: 0,
                boy: 0,
                girl: 0
            },

            classForm: {
                all: 0,
                grade: []
            }
        }
    },
    created() {
        this.countOwnHisStu();
        this.countOwnNowStu();
        this.countOwnLiveStu();
        this.countOwnHisClass();
    },
    mounted() {
        document.getElementById('').style.fontSize = document.documentElement.clientWidth / 768 * 100 + 'px';
    },
    methods: {
        async countOwnHisStu() {
            let res = await countOwnHisStu();
            if (res.code == 200) {
                if (!isEmpty(res.data)) {
                    this.hisForm = { ...res.data };
                }
            }
        },
        async countOwnNowStu() {
            let res = await countOwnNowStu();
            if (res.code == 200) {
                if (!isEmpty(res.data)) {
                    this.nowForm = { ...res.data };
                }
            }
        },

        async countOwnLiveStu() {
            let res = await countOwnLiveStu();
            if (res.code == 200) {
                if (!isEmpty(res.data)) {
                    this.liveForm = { ...res.data };
                }
            }
        },

        async countOwnHisClass() {
            let res = await countOwnHisClass();
            if (res.code == 200) {
                if (!isEmpty(res.data)) {
                    res.data.map(x => {
                        if (x.className == "all") {
                            this.classForm.all = x.classCount;
                        } else {
                            this.classForm.grade.push(x);
                        }
                    });
                }
            }
        }
    }
}

</script>
<style scoped>
.bg>p,
div,
h1,
h2,
h3,
h4,
h5,
h6,
button,
input,
ol,
li,
ul,
dl,
dt,
dd,
img,
table,
tr,
td,
th,
select {
    margin: 0;
    padding: 0;
    -webkit-appearance: none;
    border: 0;
    list-style: none;
    box-sizing: border-box;
}



.bg {
    margin: 0 auto;
    width: 100%;
    min-height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 0rem;
    padding: 0rem 0.2rem;
    background-color: #29292f;
}

.title {
    width: 100%;
    font-size: 0.12rem;
    line-height: 0.3rem;
    color: rgba(14, 253, 255, 1);
    text-align: center;
    font-weight: bold;
}



/**左边 */
.border_bg_leftTop {
    position: absolute;
    left: -0.008rem;
    top: -0.04rem;
    width: 0.37rem;
    height: 0.05rem;
    display: block;
    background: #29292f url('~@/assets/fdy_pic/title_left_bg.png') no-repeat;
    background-size: cover;
}

.border_bg_rightTop {
    position: absolute;
    right: -0.01rem;
    top: -0.01rem;
    width: 0.1rem;
    height: 0.1rem;
    display: block;

    background-size: cover;
}

.border_bg_leftBottom {
    position: absolute;
    left: -0.008rem;
    bottom: -0.008rem;
    width: 0.1rem;
    height: 0.1rem;
    display: block;

    background-size: cover;
}

.border_bg_rightBottom {
    position: absolute;
    right: -0.01rem;
    bottom: -0.01rem;
    width: 0.08rem;
    height: 0.08rem;
    display: block;
    background: url('~@/assets/fdy_pic/title_right_bg.png') no-repeat;
    background-size: cover;
}

.leftMain {
    width: 75%;
    float: left;
    padding-right: 0.1rem;
    padding-top: 0.1rem;
}

.rightMain {
    width: 25%;
    float: left;
    padding-top: 0.1rem;
}

.leftMain_top {
    width: 100%;
    padding-bottom: 0.1rem;
}

.leftMain_top ul {
    display: flex;
    display: -webkit-flex;
}

.leftMain_top ul li {
    float: left;
    width: 25%;
    padding-right: 0.1rem;
}

.leftMain_top ul li:last-child {
    padding: 0;
}

.leftMain_top ul li .liIn {
    border: 0.008rem solid rgba(14, 253, 255, 0.5);
    width: 100%;
    min-height: 60px;
    position: relative;
    padding: 0.08rem 0.05rem;
}

.leftMain_top ul li .liIn h3 {
    font-size: 0.08rem;
    color: #fff;
    margin-bottom: 0.05rem;
}

.leftMain_top ul li .liIn .shu {
    font-size: 0.12rem;
    color: rgba(14, 253, 255, 1);
    font-family: dig;
    margin-bottom: 0.02rem;
}

.leftMain_top ul li .liIn .shu i {
    font-size: 0.04rem;
    margin-left: 0.06rem;
    font-style: normal;
}

.leftMain_top ul li .liIn .zi {
    font-size: 0.04rem;
    color: #fff;
    position: relative;
    z-index: 10;
}

.leftMain_top ul li .liIn .zi .span1 {
    margin-right: 0.1rem;
}


.leftMain_middle {
    width: 100%;
    padding-bottom: 0.1rem;
    display: flex;
    display: -webkit-flex;
}

.leftMain_middle .leftMain_middle_left {
    width: 60%;
    padding-right: 0.1rem;
}

.leftMain_middle .leftMain_middle_left .leftMain_middle_leftIn {
    border: 0.008rem solid rgba(14, 253, 255, 0.5);
    width: 100%;
    min-height: 60px;
    position: relative;
    padding: 0.08rem 0.05rem;
}

.leftMain_middle .leftMain_middle_left .leftMain_middle_leftIn h3 {
    font-size: 0.08rem;
    color: #fff;
    margin-bottom: 0.05rem;
}

.leftMain_middle .leftMain_middle_left .leftMain_middle_leftIn .biaoge {
    min-height: 200px;
}

.leftMain_middle .leftMain_middle_right {
    width: 40%;
}

.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn {
    border: 0.008rem solid rgba(14, 253, 255, 0.5);
    width: 100%;
    min-height: 60px;
    position: relative;
    padding: 0.08rem 0.05rem;
}

.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn h3 {
    font-size: 0.08rem;
    color: #fff;
    margin-bottom: 0.05rem;
}

.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge {
    min-height: 200px;
}

/*左边中间部分排行榜*/
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai {
    width: 100%;
    overflow: hidden;
}

.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn {
    display: flex;
    display: -webkit-flex;
    align-items: center;
    color: #fff;
    font-size: 0.06rem;
    height: 0.18rem;
}

.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn .liIn_left {
    width: 25%;
    position: relative;
    padding-left: 0.14rem;
}

.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn .liIn_left .bot {
    width: 0.08rem;
    height: 0.08rem;
    background: #f78cf3;
    border-radius: 1000px;
    display: block;
    position: absolute;
    left: 0.02rem;
    top: 0;
    bottom: 0;
    margin: auto 0;
}

.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn2 .liIn_left .bot {
    background: #e7feb8;
}

.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn3 .liIn_left .bot {
    background: #fdea8a;
}

.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn4 .liIn_left .bot {
    background: #8ff9f8;
}

.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn5 .liIn_left .bot {
    background: #d890fa;
}

.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn6 .liIn_left .bot {
    background: #05d1fc;
}

.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn .liIn_left zi {}

.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn .liIn_line {
    width: 58%;
    height: 0.08rem;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 2000px;
}

.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn .liIn_line .line_lineIn {
    width: 100%;
    height: 0.08rem;
    background: #f78cf3;
    border-radius: 100px;
    -webkit-animation: widthMove1 2s ease-in-out;
}

.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn2 .liIn_line .line_lineIn {
    background: #e7feb8;
    -webkit-animation: widthMove2 2s ease-in-out;
}

.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn3 .liIn_line .line_lineIn {
    background: #fdea8a;
    -webkit-animation: widthMove3 2s ease-in-out;
}

.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn4 .liIn_line .line_lineIn {
    background: #8ff9f8;
    -webkit-animation: widthMove4 2s ease-in-out;
}

.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn5 .liIn_line .line_lineIn {
    background: #d890fa;
    -webkit-animation: widthMove5 2s ease-in-out;
}

.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn6 .liIn_line .line_lineIn {
    background: #05d1fc;
    -webkit-animation: widthMove6 2s ease-in-out;
}

@-webkit-keyframes widthMove1 {
    0% {
        width: 0%;
    }

    100% {
        width: 98.5%;
    }
}

@-webkit-keyframes widthMove2 {
    0% {
        width: 0%;
    }

    100% {
        width: 88.5%;
    }
}

@-webkit-keyframes widthMove3 {
    0% {
        width: 0%;
    }

    100% {
        width: 68.5%;
    }
}

@-webkit-keyframes widthMove4 {
    0% {
        width: 0%;
    }

    100% {
        width: 40.5%;
    }
}

@-webkit-keyframes widthMove5 {
    0% {
        width: 0%;
    }

    100% {
        width: 22.5%;
    }
}

@-webkit-keyframes widthMove6 {
    0% {
        width: 0%;
    }

    100% {
        width: 10.5%;
    }
}

.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn .num {
    width: 17%;
    font-family: dig;
    padding-left: 0.02rem;
}

/*左边底部*/
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_bi ul {
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    width: 100%;
}

.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_bi ul li {
    width: 33.3%;
    text-align: center;
    margin-bottom: 0.05rem;
}

.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_bi ul li .shu {
    font-size: 0.14rem;
    color: rgba(14, 253, 255, 1);
    font-family: dig;
    padding: 0.12rem 0 0.02rem;
    font-weight: normal;
}

.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_bi ul li .zi {
    font-size: 0.06rem;
    color: #fff;
}



/*右边部分*/
.rightMain .rightMain_top {
    width: 100%;
    padding-bottom: 0.1rem;
}

.rightMain .rightMain_topIn {
    border: 0.008rem solid rgba(14, 253, 255, 0.5);
    width: 100%;
    min-height: 60px;
    position: relative;
    padding: 0.08rem 0.05rem;
}

.rightMain .rightMain_topIn h3 {
    font-size: 0.08rem;
    color: #fff;
    margin-bottom: 0.05rem;
}

.rightMain .rightMain_topIn .biaoge {
    min-height: 200px;
}

.rightMain .rightMain_bottom {
    width: 100%;
}

.rightMain .rightMain_bottomIn {
    border: 0.008rem solid rgba(14, 253, 255, 0.5);
    width: 100%;
    min-height: 60px;
    position: relative;
    padding: 0.08rem 0.05rem;
}

.rightMain .rightMain_bottomIn h3 {
    font-size: 0.08rem;
    color: #fff;
    margin-bottom: 0.05rem;
}

/*右下角表格*/
.rightMain .rightMain_bottomIn .biaoge {
    min-height: 200px;
}

.rightMain .rightMain_bottomIn .biaoge_list {
    overflow: hidden;
    position: relative;
}

.rightMain .rightMain_bottomIn .biaoge_list .biaoge_listIn .ul_list {
    overflow: hidden;
    position: relative;
}

.rightMain .rightMain_bottomIn .biaoge_list .biaoge_listIn .ul_listIn {
    -webkit-animation: 14s gundong linear infinite normal;
    animation: 14s gundong linear infinite normal;
    position: relative;
}

@keyframes gundong {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    100% {
        -webkit-transform: translate3d(0, -30vh, 0);
        transform: translate3d(0, -30vh, 0);
    }
}

.rightMain .rightMain_bottomIn .biaoge_list ul {
    display: flex;
    display: -webkit-flex;
    width: 100%;
}

.rightMain .rightMain_bottomIn .biaoge_list .ul_title {
    background: linear-gradient(left, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1));
    background: -ms-linear-gradient(left, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1));
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1));
    background: -moz-linear-gradient(left, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1));
}

.rightMain .rightMain_bottomIn .biaoge_list .ul_con {
    border-bottom: 0.008rem solid rgba(14, 253, 255, 0.5);
}

.rightMain .rightMain_bottomIn .biaoge_list ul li {
    width: 20%;
    text-align: center;
    color: #fff;
    font-size: 0.06rem;
    height: 0.2rem;
    line-height: 0.2rem;
}

.rightMain .rightMain_bottomIn .biaoge_list ul li:frist-child {
    text-align: left;
}
</style>